<template>
  <div>
    <!-- 调用轮播组件 -->
    <swipeJia :swipelist="bannerlist"></swipeJia>  

    <ul class="mui-table-view mui-grid-view mui-grid-9">
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/newsList" tag="a">
                <span class="mui-icon mui-icon-home"></span>
                <div class="mui-media-body">新闻资讯</div></router-link></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/photoList" tag="a">
                <span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
                <div class="mui-media-body">图片分享</div></router-link></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/goodsList" tag="a">
                <span class="mui-icon mui-icon-chatbubble"></span>
                <div class="mui-media-body">商品列表</div></router-link></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="" tag="a">
                <!-- <span class="mui-icon mui-icon-location"></span> -->
                <img width="60" :src="img" alt="">
                <div class="mui-media-body">location</div></router-link></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="#" tag="a">
                <!-- <span class="mui-icon mui-icon-search"></span> -->
                <img width="60" :src="img" alt="">
                <div class="mui-media-body">Search</div></router-link></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="#" tag="a">
                <!-- <span class="mui-icon mui-icon-phone"></span> -->
                <img width="60" :src="img" alt="">
                <div class="mui-media-body">Phone</div></router-link></li>
        <!-- <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="#" tag="a">
                <span class="mui-icon mui-icon-gear"></span>
                <div class="mui-media-body">Setting</div></router-link></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="#" tag="a">
                <span class="mui-icon mui-icon-info"></span>
                <div class="mui-media-body">about</div></router-link></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="#" tag="a">
                <span class="mui-icon mui-icon-more"></span>
                <div class="mui-media-body">more</div></router-link></li> -->
    </ul> 

    <!-- <input type="button" value="get请求" @click="getInfo">
    <input type="button" value="post请求" @click="postInfo">
    <input type="button" value="jsonp请求" @click="jsonpInfo"> -->

  </div>
</template>

<script>
import swipe from '../subcomponents/swipe.vue'

export default {
  data() {
    return {
      msg: "我是首页组件",
	    img: '../../images/icon/timg.jpeg',
	    bannerlist: [
        {id: 1,name: '1111',img: '../../images/news/cbd.jpg'},
        {id: 2,name: '222',img: '../../images/2.jpg'},
        {id: 3,name: '33',img: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg'},
        {id: 4,name: '4444',img: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_b.jpg'},
      ]
    };
  },
  components: { "swipeJia": swipe},
  created() {
    
    //this.getlb()
    // this.getInfo()
  },
  mounted() {},
  methods: {
    getlb(){
      this.$http.get("search?keywords=父亲").then(result => {
        // console.log(JSON.stringify(result))
        this.bannerlidst = result.body.result.songs
      })
    },



    getInfo() { // 发起get请求
      //  当发起get请求之后， 通过 .then 来设置成功的回调函数
      this.$http.get('http://vue.studyit.io/api/getlunbo').then(function (result) {
        // 通过 result.body 拿到服务器返回的成功的数据
        console.log(result.body)
      })
    },
    postInfo() { // 发起 post 请求   application/x-wwww-form-urlencoded
      //  手动发起的 Post 请求，默认没有表单格式，所以，有的服务器处理不了
      //  通过 post 方法的第三个参数， { emulateJSON: true } 设置 提交的内容类型 为 普通表单数据格式
      this.$http.post('http://vue.studyit.io/api/post', {}, { emulateJSON: true }).then(result => {
        console.log(result.body)
      })
    },
    jsonpInfo() { // 发起JSONP 请求
      this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result => {
        console.log(result.body)
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.mui-grid-view.mui-grid-9{
  background-color: #fff;
  .mui-table-view-cell{
    border: 0;
  }
  a{
    text-decoration: none;
  }
}
</style>